<template>
	<view class="order-detail full box relative bg-primary flex-col">
		<view class="w-wrap">
			<view class="w-inner">
				<scroll-view scroll-y="true" class="full scroll-box">
					<view class="order-id">
						<text class="order-no">工单编号：{{ orderDetail.sn || ''}}</text>
						<text class="order-status">{{ orderDetail.status_text || ''}}</text>
					</view>
					<view class="user-box">
						<text class="user-name">{{ orderDetail.shifu_name }}</text>
						<text class="user-name">{{ orderDetail.shifu_mobile }}</text>
						<image @click="handleCallPhone"
							src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803233259fad488253.png"
							mode="aspectFill" class="phone-icon"></image>
					</view>
					<view class="info-box">
						<view class="desc-item">
							<text class="desc-label">服务名称</text>
							<text class="desc-value">{{ orderDetail.title }}</text>
						</view>
						<view class="desc-item">
							<text class="desc-label">服务时间</text>
							<text class="desc-value">{{ orderDetail.date }}</text>
						</view>
						<view class="desc-item">
							<text class="desc-label">服务地址</text>
							<text class="desc-value">{{ orderDetail.xiangxi_address }}</text>
						</view>
						<view class="desc-item active">
							<text class="desc-label">工单说明</text>
						</view>
						<view class="remark-box">
							<textarea class="remark-input" placeholder="点击此处可留言" v-model="remark"></textarea>
						</view>
					</view>
					<view class="price-box">
						<!-- <view class="price-item">
							<text class="price-label">服务费</text>
							<text class="price-value">￥28</text>
						</view> -->
						<view class="price-item">
							<text class="price-label">订单金额</text>
							<text class="price-value">￥{{ orderDetail.order_amount || ""}}</text>
						</view>
					</view>
					<view class="pay-box">
						<view class="pay-title">
							<text>支付方式</text>
						</view>
						<view class="pay-item">
							<image class="pay-icon" mode="aspectFill"
								src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/2025080323322062bd02747.png">
							</image>
							<text class="pay-text">微信支付</text>
							<view class="check-box active">
								<u-icon name="checkmark" color="#fff" size="28rpx" />
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer-wrap" v-if="orderDetail.status === 10">
			<view class="pay-price">
				<text class="pay-label">合计：</text>
				<text class="price-value">￥{{ orderDetail.order_amount }}</text>
			</view>
			<u-button type="primary" shape="circle" @click="handlePay">去支付</u-button>
		</view>
	</view>
</template>

<script>
import {request, showLoading, toast} from "@/utils/tool";

  export default {
		data() {
			return {
				remark: "",
				orderDetail: {
					sn: "",
					id: "",
					shifu_name: "",
					shifu_mobile: "",
					status_text: "",
					title: "",
					date: "",
					xiangxi_address: "",
					order_amount: "",
					status: ""
				}
			}
		},
		onLoad(ev) {
			const { data } = ev
			if (data) this.orderDetail = JSON.parse(data)
      console.log(this.orderDetail,'orderDetail')
		},
		methods: {
      async prePay(data, openid, hide) {
        const { from, order_id } = data
        const resp = await request({
          url: "/pay/prepay",
          data: {
            from,
            pay_way: 2,
            order_id,
            pay_qudao: 1,
            openid
          }
        }).catch(hide)
        if (resp.code !== 1) {
          hide()
          return toast({ title: resp.msg || "获取支付参数失败" })
        }
        const { config } = resp.data
        hide()
        uni.requestPayment({
          ...config,
          success: ev => {
            toast({ title: "支付成功", icon: "success" })
            uni.$emit("workOrderPaySuccess")
          },
          fail: error => {
            toast({ title: "支付失败" })
          }
        })
      },
      getOpenId() {
        return new Promise(resolve => {
          uni.login({
            provider: "weixin",
            success: async ev => {
              const { code } = ev
              const resp = await request({
                url: '/login/mnpGetOpenid',
                data: { code }
              })
              resolve([null, resp.data])
            },
            fail: error => {
              toast({ title: "获取code失败" })
              resolve([error, null])
            }
          })

        })
      },
      async handlePay(){
        const hide = showLoading("正在获取")
        const {id} = this.orderDetail
        if(!id) return  toast({title:"缺少订单ID"})
        const [codeError, codeResp] = await this.getOpenId()
        if (codeError) return hide()
        const { openid } = codeResp
        await this.prePay({from:"gongdan",order_id:id}, openid, hide)
      },
			handleCallPhone() {
				const { shifu_mobile } = this.orderDetail
				if (!shifu_mobile) return
				uni.makePhoneCall({
					phoneNumber: shifu_mobile
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		.footer-wrap {
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-button,
			button {
				margin: 0;
				width: 328rpx;
			}

			.pay-price {
				font-size: 28rpx;
				line-height: 44rpx;

				.pay-label {
					color: rgba(0, 0, 0, 0.9);
				}

				.price-value {
					font-weight: bold;
					color: #FF4A18;

				}
			}
		}

		.pay-box {
			margin-top: 24rpx;
			padding: 32rpx 48rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #fff;

			.pay-item {
				display: flex;
				align-items: center;

				.check-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 48rpx;
					height: 48rpx;
					border: 2rpx solid #b1b4bb;
					border-radius: 50%;
					margin-left: auto;
					box-sizing: border-box;

					&.active {
						background: #3361F0;
						border-color: #3361F0;
					}
				}

				.pay-text {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
					margin-left: 16rpx;
				}

				.pay-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.pay-title {
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
				margin-bottom: 30rpx;
			}
		}

		.price-box {
			margin-top: 24rpx;
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.price-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26rpx 0;

				.price-label {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 44rpx;
				}

				.price-value {
					font-weight: bold;
					font-size: 28rpx;
					color: rgba(255, 0, 0, 0.9);
					line-height: 44rpx;
				}
			}
		}

		.info-box {
			padding: 38rpx 36rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			margin-top: 24rpx;

			.remark-box {
				width: 100%;
				box-sizing: border-box;
				position: relative;
				background: #F6F7F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #EBECEF;

				.remark-input {
					width: 100%;
					font-size: 28rpx;
					color: #333;
					line-height: 44rpx;
					padding: 14rpx 26rpx;
					height: 160rpx;
				}
			}

			.desc-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				&.active {
					margin-top: 30rpx;
					margin-bottom: 18rpx;
				}

				.desc-label {
					font-size: 30rpx;
					color: #212121;
					line-height: 40rpx;
				}

				.desc-value {
					font-size: 26rpx;
					color: #616161;
					line-height: 40rpx;
				}
			}
		}

		.user-box {
			padding: 28rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.user-avatar {
				width: 94rpx;
				height: 94rpx;
				border-radius: 50%;
			}

			.user-name {
				font-size: 30rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 34rpx;
			}

			.phone-icon {
				width: 78rpx;
				height: 78rpx;
				margin-left: auto;
			}
		}

		.order-id {
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-status {
				font-weight: bold;
				font-size: 30rpx;
				color: #3361F0;
				line-height: 40rpx;
			}

			.order-no {
				font-weight: bold;
				font-size: 28rpx;
				color: #1D2129;
				line-height: 44rpx;
			}
		}

		.scroll-box {
			padding: 24rpx 24rpx 0;
			box-sizing: border-box;
			position: relative;
		}
	}
</style>